<ui:composition         
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:ds="http://deltaset.org/deltaset-faces"
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core">

    <h3>File Upload</h3>

    <script type='text/javascript'>
//<![CDATA[
    function loadFile() {
        var input, file, fr;

        if (typeof window.FileReader !== 'function') {
            bodyAppend("p", "The file API isn't supported on this browser yet.");
            return;
        }

        input = document.getElementById('fileinput');
        if (!input) {
            bodyAppend("p", "Um, couldn't find the fileinput element.");
        }
        else if (!input.files) {
            bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
        }
        else if (!input.files[0]) {
            bodyAppend("p", "Please select a file before clicking 'Load'");
        }
        else {
            file = input.files[0];
            fr = new FileReader();
            fr.onload = receivedText;
            fr.readAsText(file);
        }

        function receivedText() {
            showResult(fr, "Text");

            fr = new FileReader();
            fr.onload = receivedBinary;
            fr.readAsBinaryString(file);
        }

        function receivedBinary() {
            showResult(fr, "Binary");
        }
    }

    function showResult(fr, label) {
        var markup, result, n, aByte, byteStr;

        markup = [];
        result = fr.result;
        for (n = 0; n < result.length; ++n) {
            aByte = result.charCodeAt(n);
            byteStr = aByte.toString(16);
            if (byteStr.length < 2) {
                byteStr = "0" + byteStr;
            }
            markup.push(byteStr);
        }
        bodyAppend("p", label + " (" + result.length + "):");
        bodyAppend("pre", markup.join(" "));
    }

    function bodyAppend(tagName, innerHTML) {
        var elm;

        elm = document.createElement(tagName);
        elm.innerHTML = innerHTML;
        //document.body.appendChild(elm);
        document.getElementById("bodyAppend").appendChild(elm);
    }
// ]]>
    </script>

    <h:form id="uploadForm" >
       
        <!--
        <h:commandButton value="Do Upload" onclick="loadFile();"/>
        <input type="file" id="fileinput"/>
        File to something..
        <div id="bodyAppend">

        </div>
        -->
        <h:commandButton id="showResult" action="#{uploadBean.showResult}" value="showResult XEXE"/><br/>

        <h:commandButton id="showResultAjax" action="#{uploadBean.showResultAjax}" value="showResult Ajax">
            <f:ajax render="@form" execute="@form"/>
        </h:commandButton>    

        authorName:<h:inputText value="#{uploadBean.authorName}" /><br/>


        FileRequestHolder.isEmpty=#{uploadBean.isEmpty}<br/>
        <br/><br/>
        xmmmm...{uploadBean.currentFile}
        <hr/>
        again.... AJAX
        <ds:inputAjaxFile value="#{uploadBean.currentFile}" formId="#{cc.clientId}:uploadForm"/>
        <hr/>
        
    </h:form> 

</ui:composition>   
